<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/echarts.js"></script>
		<script src="js/china.js"></script>
	</head>
	<body>
		<div id="main" style="width: 100%;height: 500px;"></div>
		<script type="text/javascript">
			var chartDom = document.getElementById('main');
			var myChart = echarts.init(chartDom);
			var points = [{
				value: [118.8062, 31.9208],
				itemStyle: {
					color: "#4ab2e5"
				}
			}];
			var option = option = {
				backgroundColor: "#013954",
				geo: {
					map: "china",
					aspectScale: 0.75, //长宽比
					zoom: 1.1,
					roam: true,
				},
				series: [
					{
						type: "map",
						roam: false,
						label: {
							normal: {
								show: true,
								textStyle: {
									color: "#1DE9B6",
								},
							},
							emphasis: {
								textStyle: {
									color: "rgb(183,185,14)",
								},
							},
						},
						itemStyle: {
							normal: {
								borderColor: "rgb(147, 235, 248)",
								borderWidth: 1,
								areaColor: {
									type: "radial",
									x: 0.5,
									y: 0.5,
									r: 0.8,
									colorStops: [{
											offset: 0,
											color: "#09132c", // 0% 处的颜色
										},
										{
											offset: 1,
											color: "#274d68", // 100% 处的颜色
										},
									],
									globalCoord: true, // 缺省为 false
								},
							},
							emphasis: {
								areaColor: "rgb(46,229,206)",
								//    shadowColor: 'rgb(12,25,50)',
								borderWidth: 0.1,
							},
						},
						zoom: 1.1,
						map: "china", //使用
					},
					{
						type: "effectScatter",
						coordinateSystem: "geo",
						showEffectOn: "render",
						zlevel: 1,
						rippleEffect: {
							period: 15,
							scale: 4,
							brushType: "fill",
						},
						hoverAnimation: true,
						label: {
							normal: {
								formatter: "{b}",
								position: "right",
								offset: [15, 0],
								color: "#1DE9B6",
								show: true,
							},
						},
						itemStyle: {
							normal: {
								color: "#1DE9B6"
									/* function (value){ //随机颜色
									return "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6);
									}*/
									,
								shadowBlur: 10,
								shadowColor: "#333",
							},
						},
						symbolSize: 12,
						data: points,
					}, //地图线的动画效果
					{
						type: "lines",
						zlevel: 2,
						effect: {
							show: true,
							period: 4, //箭头指向速度，值越小速度越快
							trailLength: 0.4, //特效尾迹长度[0,1]值越大，尾迹越长重
							symbol: "arrow", //箭头图标
							symbolSize: 7, //图标大小
						},
						lineStyle: {
							normal: {
								color: "#1DE9B6",
								width: 1, //线条宽度
								opacity: 0.1, //尾迹线条透明度
								curveness: 0.3, //尾迹线条曲直度
							},
						},
						data: [{
							coords: [
								[118.8062, 31.9208],
								[119.4543, 25.9222],
							],
							lineStyle: {
								color: "#4ab2e5"
							},
						}],
					},
				],
			};
			myChart.setOption(option, true);
		</script>
	</body>
</html>
